import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'
function echartInit (node, point) {
  console.log('222',point);
  const myChart = echarts.init(node)
  const handred = 100
  let option = {}
  option = {
    title: {
      text: point + '%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontWeight: 'normal',
        color: '#000',
        fontSize: '13'
      }
    },
    tooltip: {
      formatter: function (params) {
        return params.name + ':' + params.percent + ' %'
      }
    },
    series: [{
      name: 'circle',
      type: 'pie',
      clockWise: true,
      radius: ['50%', '66%'],
      itemStyle: {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          }
        }
      },
      hoverAnimation: false,
      data: [{
        value: point,
        
        name: '占比',
        itemStyle: {
          normal: {
            color: { // 颜色渐变
              colorStops: [{
                offset: 0,
                color: '#ff8b40' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#ff8b40' // 100% 处的颜色1
              }]
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            }
          }
        }
      },
      {
        name: '剩余',
        value: handred - point,
        itemStyle: {
          normal: {
            color: '#E1E8EE'
          }
        }
      }]
    }]
  }
  myChart.setOption(option)
}
function Bfb ({ point, digital, name }) {
  console.log('测试',point, digital, name)
  // 1. 先不考虑传参问题  静态数据渲染到页面中
  // 2. 把那些用户可能定制的参数 抽象props (1.定制大小 2.data 以及说明文字)
  const nodeRef = useRef()
  useEffect(() => {
    echartInit(nodeRef.current, point)
  }, [point])

  return <div style={{ width: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
    <div ref={nodeRef} style={{ width: '150px', height: '150px' }}></div>
    <span style={{
      fontWeight: '700',
      fontSize: '20px'
    }}>{digital}</span>
    <span style={{ fontSize: '18px' }}>{name}</span>
  </div >
}

export default Bfb